<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html ;charset=utf-8" />
    <!-- JQuery import -->
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.2.1/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/upload/iframe/css/upload.css" />
</head>

<body>

    <!-- Upload file form -->
    <form id="upload-file-form">
        <label for="upload-file-input">上传操作:</label>
        <div  id="btnUp"  class="upload-cover-btn" >选择文件
            <input id="upload-file-input"  type="file" capture="camera" accept="image/*" name="uploadFile"  multiple="multiple"/>
        </div>
        <br/>
    </form>
    <!-- Upload Progress&Message-->
    <hr>
    <div>
        <label>进度:</label>
        <div id="progress_info" class="progress">
            <span></span>
        </div>
    </div>
    <hr>
    <div>
        <label>结果:</label>
        <span id="upload-file-message"></span>
        <div id="img_list"></div>
    </div>
    <!-- Javascript functions -->
    <script>
        var images = []; //已经上传的图片列表


        // bind the on-change event for the input element (triggered when a file
        // is chosen)
        $(document).ready(function() {
            $("#upload-file-input").on("change", uploadFile_xhr);
        });


        //方式二 传文件 xhr方式
        function uploadFile_xhr (){
                var file = this.files[0];
                var fd = new FormData();
                fd.append('uploadfile', file, file.name);
                var xhr = new XMLHttpRequest;
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        var percentage = Math.round((e.loaded * 100) / e.total);
                        document.getElementById('progress_info').firstElementChild.style.display="inline-block";
                        document.getElementById('progress_info').firstElementChild.style.width= percentage + '%';
                        document.getElementById('progress_info').firstElementChild.innerHTML=percentage + '%';
                    }
                }, false);
                xhr.upload.addEventListener('load', function (e) {
                    document.getElementById('progress_info').firstElementChild.style.width= '100%';
                    document.getElementById('progress_info').firstElementChild.innerHTML= '100%';
                }, false);
                xhr.onreadystatechange = function (e) {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(xhr.responseText);
                        var data= JSON.parse(xhr.responseText);
                        document.getElementById('upload-file-message').innerHTML = data.message;
                        addImage(data);
                    }
                }
                xhr.open("POST", "/ajax/upload");
                xhr.send(fd);
            };



        /**
         * Upload  Ajax 方式 .
         */
        function uploadFile() {
            $.ajax({
                url: "/ajax/upload",
                type: "POST",
                data: new FormData($("#upload-file-form")[0]),
                enctype: 'multipart/form-data',
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // Handle upload success
                    $("#upload-file-message").text(data.message);
                    addImage(data);
                },
                error: function () {
                    // Handle upload error
                    $("#upload-file-message").text(data.message);
                }
            });
        }



        //添加图片
        function addImage(data) {
            //alert(data);

            // 优化retina, 在retina下这个值是2
            var ratio = window.devicePixelRatio || 1,thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio;
            if ( data.code != "200" ) return;
            var text ='<div class="img-wrapper"><div class="img-container" style="width: "+thumbnailWidth; height:"+thumbnailHeight>';
            text += '<img width="113px" height="113px"  src="'+data.data+'">';
            text += '<div class="file-opt-box clearfix"><span class="remove">删除</span></div></div></div>';
            var $image =$(text);
            $("#img_list").append($image);
            //删除图片
            $image.find(".remove").on("click", function() {
                try {
                    var src = $(this).parent().prev().attr("src");
                    alert(src);
                    images.remove(src);
                    $image.remove();
                } catch (e) {console.log(e);}
            });
            images.push(data.data);
            console.log(images);
        }
        if ( Array.prototype.remove == undefined ) {
            Array.prototype.remove = function(item) {
                for ( var i = 0; i < this.length; i++ ) {
                    if ( this[i] == item ) {
                        this.splice(i, 1);
                        break;
                    }
                }
            }
        }
    </script>

</body>

</html>
